import React, {Component} from "react";
import {Button, Table, List} from 'antd';
import axios from "axios";
import cookie from 'react-cookies';
import {server_addr} from "../index";

const columns = [
    {
        title: '排名',
        dataIndex: 'rank',
        key: 'rank',
        render: text => {
            if(text == "1"){
                return <span style={{
                    borderRadius: "1vw",
                    background: "red",
                    display: "block",
                    width: "1.5vw",
                    height: "1.5vw",
                    lineHeight: "1.5vw",
                    margin: "0 1vw",
                    textAlign: "center",
                    color: "white"}}>{text}</span>
            }else if(text == "2"){
                return <span style={{
                    borderRadius: "1vw",
                    background: "darkorange",
                    display: "block",
                    width: "1.5vw",
                    height: "1.5vw",
                    lineHeight: "1.5vw",
                    margin: "0 1vw",
                    textAlign: "center",
                    color: "white"}}>{text}</span>
            }else if(text == "3"){
                return <span style={{
                    borderRadius: "1vw",
                    background: "orange",
                    display: "block",
                    width: "1.5vw",
                    height: "1.5vw",
                    lineHeight: "1.5vw",
                    margin: "0 1vw",
                    textAlign: "center",
                    color: "white"}}>{text}</span>
            }else{
                return <span style={{
                    borderRadius: "1vw",
                    background: "#3398DB",
                    display: "block",
                    width: "1.5vw",
                    height: "1.5vw",
                    lineHeight: "1.5vw",
                    margin: "0 1vw",
                    textAlign: "center",
                    color: "white"}}>{text}</span>
            }
        }
    },
    {
        title: '股票名称',
        dataIndex: 'name',
        key: 'name',
    },
    {
        title: '股票代码',
        dataIndex: 'code',
        key: 'code',
    },
    {
        title: '涨跌幅',
        dataIndex: 'change',
        key: 'change',
        render: text =>{
            return <span style={{color: "red"}}>{text}</span>
        }
    }
];

export default class Search extends Component {
    constructor(props) {
        super(props);
        this.state = {
            List: [],
            news: [],
            default: false
        }
        this.getData = this.getData.bind(this);
        this.Search = this.Search.bind(this);
    }

    getData(){
        //新闻
        axios.get(server_addr+"/news",{}).then((res)=>{
            var data = [];
            for(var i=0; i<res.data.length; i++){
                data.push({
                    title: res.data[i].title,
                    description: res.data[i].source+' '+res.data[i].date+' '+res.data[i].time,
                    content: res.data[i].content.substring(0,100)+'……'
                });
            }
            this.setState({
                news: data
            })
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
        //涨幅榜
        axios.get(server_addr+"/rank",{}).then((res)=>{
            var data = [];
            for(var i=0; i<res.data.length; i++){
                data.push({
                    rank: res.data[i].ranking,
                    name: res.data[i].name,
                    code: res.data[i].code,
                    change: res.data[i].change+'%'
                });
            }
            this.setState({
                List: data
            })
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
    }

    Search(){
        if(this.content.value !== ''){
            // if(!this.state.default){
            //     alert('请登录！');
            // }else{
                axios.get(server_addr+"/search?stock="+this.content.value,{}).then((res)=>{
                    if(res.data === 'noExist'){
                        alert('未找到该股票！');
                    }else{
                        window.location.href="#/Overview?stock=" + res.data;
                    }
                }).catch(function (error) {
                    alert('未连接到服务器！');
                })
            // }
        }
    }

    componentDidMount() {
        this.getData();
        if(cookie.load("user") !== undefined){
            this.setState({
                default: true
            })
        }
    }

    render() {
        document.title = "搜索";
        return (
            <div>
                {
                    this.state.default === false ? (
                        <div style={{width:"100%", height:"6vh", background:"#F2F2F2"}}>
                            <Button type="primary" style={{margin:"0.8vh 0 0 80%"}} onClick={()=>{window.location.href = "#/Login"}}>sign in</Button>
                            <Button style={{margin:"0.8vh 0 0 1%"}} onClick={()=>{window.location.href = "#/Register"}}>sign up</Button>
                        </div>
                    ):(
                        <div style={{width:"100%", height:"6vh", background:"#F2F2F2"}}>
                            <p style={{padding:"1vh 0 0 80%"}}>你好，{cookie.load("user")}</p>
                        </div>
                    )
                }
                <input style={{width:"40%", height:"5vh", margin:"3vh 0 0 20%", float:"left"}}  ref={input=>{this.content=input}}/>
                <Button type="primary" style={{width:"10%", height:"5vh", margin:"3vh 0 0 1%", borderRadius:"1vw"}} onClick={this.Search}>搜索</Button>
                <div style={{width:"55%", height:"75vh", float:"left", margin:"5vh 0 0 10%"}}>
                    <List
                        itemLayout="vertical"
                        size="large"
                        pagination={{pageSize: 3}}
                        dataSource={this.state.news}
                        renderItem={item => (
                            <List.Item
                                key={item.title}
                                extra={
                                    <img
                                        width={200}
                                        alt="logo"
                                        src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
                                    />
                                }
                            >
                                <List.Item.Meta
                                    title={item.title}
                                    description={item.description}
                                />
                                {item.content}
                            </List.Item>
                        )}
                    />
                </div>
                <div style={{width:"20%", height:"75vh", float:"right", margin:"3vh 10% 0 0"}}>
                    <p style={{height:"2.5vh", fontSize:"1.2vw", fontWeight:"bold"}}>涨幅榜</p>
                    <Table columns={columns} dataSource={this.state.List} pagination={false} size="middle"
                           onRow={(record) => ({
                               onClick: () => {
                                   window.location.href="#/Overview?stock="+record.code;
                               },
                           })}
                    />
                </div>
            </div>
        );
    }
}